import React from 'react'
import {
    Switch,
    Link,
    Route,
    useParams,
    useRouteMatch
} from 'react-router-dom'

function Topic(props) {
    let {path, url} = useRouteMatch();
    let topicId = props.topicId;
    return (
        <li><Link to={`${url + topicId}`}>{props.topicName}</Link></li>
    )
}

function TopicContent(props) {
    let {topicId} = useParams();
    return (
        <div>{topicId}</div>
    )
}

function Topics(props) {
    const topicList = [
        {topicName: "React Component", topicId: "1"},
        {topicName: "React Dom", topicId: "2"},
        {topicName: "React Router", topicId: "3"},
        {topicName: "React-Redux", topicId: "4"}
    ];
    const {path, url} = useRouteMatch();
    return (
        <div>
            <ul>{
                topicList.map(topic => (
                    <Topic topicName={topic.topicName} topicId={topic.topicId} key={topic.topicId}/>
                ))
            }</ul>
            <Switch>
                <Route exact path={path}>
                    <p>topic main page</p>
                </Route>
                <Route path={`${path}/:topicId`}>
                    <TopicContent/>
                </Route>
            </Switch>
        </div>
    )
}

export default Topics
